<!DOCTYPE html>
<html  lang="zh_CN" xmlns:th="http://www.thymeleaf.org" style="overflow: hidden">
<head>
    <meta charset="utf-8">
    <title> 新增商品 </title>
    <th:block th:include="~{common/common::commonHead}"/>
    <!--<meta name="description" content="Dashboard"/>-->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0"/>-->
    <!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>-->
    <!--<link rel="shortcut icon" href="../../img/favicon.ico" th:href="@{/img/favicon.ico}" type="image/x-icon">-->
    <!--&lt;!&ndash;Basic Styles&ndash;&gt;-->
    <!--<link href="../../lib/bootstrap-3.3.7/css/bootstrap.min.css" th:href="@{/lib/bootstrap-3.3.7/css/bootstrap.min.css}" rel="stylesheet"/>-->
    <!--<link href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>-->
    <!--<link href="../../lib/jquery-ui/css/weather-icons.min.css" th:href="@{/lib/jquery-ui/css/weather-icons.min.css}" rel="stylesheet"/>-->
    <!--&lt;!&ndash;Beyond styles&ndash;&gt;-->
    <!--<link href="../../lib/jquery-ui/css/beyond.min.css" th:href="@{/css/beyond.min.css}" rel="stylesheet" type="text/css"/>-->
    <!--&lt;!&ndash; Relative framework custom style &ndash;&gt;-->
    <!--<link href="../../css/common.css" th:href="@{/css/common.css}" rel="stylesheet"/>-->
    <!--&lt;!&ndash;Skin Script: Place this script in head to load scripts for skins and rtl support&ndash;&gt;-->
    <!--<script src="../../lib/jquery-ui/js/skins.min.js" th:src="@{/lib/jquery-ui/js/skins.min.js}"></script>-->
    <!--&lt;!&ndash; addCommodity &ndash;&gt;-->
<body data-width="900" data-height="600">
<div class="row">
    <div class="col-lg-12 col-sm-12 col-xs-12">
            <div class="widget-body">
                <div class="widget-main ">
                    <div class="tabbable">
                        <ul class="nav nav-tabs tabs-flat" id="myTab11">
                            <!--<li class="active">-->
                                <!--<a data-toggle="tab" href="#ZOObaby">-->
                                    <!--日用品-->
                                <!--</a>-->
                            <!--</li>-->
                            <!--<li>-->
                                <!--<a data-toggle="tab" href="#Snacks">-->
                                    <!--副食食品-->
                                <!--</a>-->
                            <!--</li>-->
                            <!--<li>-->
                                <!--<a data-toggle="tab" href="#Fruit">-->
                                    <!--生鲜水果-->
                                <!--</a>-->
                            <!--</li>-->
                            <!--<li>-->
                                <!--<a data-toggle="tab" href="#Book">-->
                                    <!--图书杂志-->
                                <!--</a>-->
                            <!--</li>-->
                        </ul>
                        <div class="tab-content tabs-flat">
                            <div id="ZOObaby" class="tab-pane in active">
                                <table class="table">
                                    <thead>
                                    <tr role="row">
                                        <th>
                                            商品图片
                                        </th>
                                        <th>
                                            商品
                                        </th>
                                        <th>
                                            参考价
                                        </th>
                                        <th>
                                            结算价
                                        </th>
                                        <th>
                                            单位
                                        </th>
                                        <th>
                                            数量
                                        </th>
                                        <th>
                                            操作
                                        </th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    <tr>
                                        <td>
                                            <img class="img-flyer" src="../../img/temp1.png" width="80" height="80">
                                        </td>
                                        <td class="td-describe">
                                            <h6>我是商品名称,我是方便面</h6>
                                            <span class="dim-text">商品编号:MP12345678</span>
                                        </td>
                                        <td>4.05</td>
                                        <td>4.05</td>
                                        <td>包</td>
                                        <td class="td-quantity">
                                            <div class="spinner spinner-horizontal spinner-two-sided">
                                                <div class="spinner-buttons	btn-group spinner-buttons-left">
                                                    <button type="button" class="btn spinner-down  blue">
                                                        <i class="fa fa-minus"></i>
                                                    </button>
                                                </div>
                                                <input type="text" class="spinner-input form-control">
                                                <div class="spinner-buttons	btn-group spinner-buttons-right">
                                                    <button type="button" class="btn spinner-up blue">
                                                        <i class="fa fa-plus"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="" class="dropdown-toggle" type="button">删除</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div id="Snacks" class="tab-pane">
                               2
                            </div>
                            <div id="Fruit" class="tab-pane">
                                3
                            </div>
                            <div id="Book" class="tab-pane">
                                4
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="storage-pop">
                <div class="pop-title">
                    <a href=" " class="close" title="关闭">
                        <span class="fa fa-times"></span>
                    </a>
                    <h3>购物车</h3>
                </div>
                <div class="pop-content">
                    <div class="pop-list">
                        <ul>
                            <li class="pop-item">
                                <div class="pop-item-pic">
                                    <a href="#"><img src="../../img/temp1.png" width="80" height="80"></a>
                                </div>
                                <div class="pop-item-desc">
                                    <h4 class="pop-item-name">统一老坛酸菜</h4>
                                    <div class="pop-item-sku">
                                        <div class="quantity-info">数量</div>
                                        <div class="spinner spinner-horizontal spinner-two-sided">
                                            <div class="spinner-buttons	btn-group spinner-buttons-left">
                                                <button type="button" class="btn spinner-down  blue">
                                                    <i class="fa fa-minus"></i>
                                                </button>
                                            </div>
                                            <input type="text" class="spinner-input form-control">
                                            <div class="spinner-buttons	btn-group spinner-buttons-right">
                                                <button type="button" class="btn spinner-up blue">
                                                    <i class="fa fa-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="pop-item-price">
                                        <div class="quantity-info">规格</div>
                                        <span class="cart-price">￥5.00/包</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="pop-handler">
                        <span class="pop-handler-left">共<span class="pop-price">1</span>件商品</span>
                        <span class="pop-handler-right">￥569.00</span>
                    </div>
                </div>
            </div>
            <div class="widget-footer">
                <div class="fl-left">
                    <a class="footer-all">
                        <input type="radio">
                        全选
                    </a>
                    <a class="footer-del" href="">
                        删除
                    </a>
                </div>
                <div class="fl-right">
                    <a class="footer-statistics"  href="">
                        <i class="fa fa-angle-double-up"></i>
                        已选商品<span class="footer-statistics-number">8件</span>
                    </a>
                    <a class="footer-account">
                        新增订单
                    </a>
                </div>
            </div>
    </div>
</div>

<!--Basic Scripts-->
<script src="../../lib/jquery-ui/js/jquery-2.0.3.min.js" th:src="@{/lib/jquery-ui/js/jquery-2.0.3.min.js}"></script>
<script src="../../lib/bootstrap-3.3.7/js/bootstrap.min.js" th:src="@{/lib/bootstrap-3.3.7/js/bootstrap.min.js}"></script>
<!--Beyond Scripts-->
<script src="../../lib/jquery-ui/js/beyond.min.js" th:src="@{/lib/jquery-ui/js/beyond.min.js}"></script>
<!--Fuelux Spinner-->
<script src="../../lib/jquery-ui/js/fuelux/spinner/fuelux.spinner.min.js"></script>
<script src="../../lib/jquery-ui/js/jquery-fly.js"></script>
<script>
    //-- 增减选择框--
    $('.spinner').spinner();


    //购物车飞入效果
    $(function() {
        var offset =$(".footer-statistics").offset() ;
        $(" .spinner-up").on('click',function(event){
            var addcart = $(this);
            var img = $('.img-flyer').attr('src');
            var flyer = $('<img class="u-flyer" src="'+img+'">');
            var winw = $(window).width();
            //alert(winw)
            flyer.fly({
                start: {
                    left: event.clientX-30, //开始位置（必填）#fly元素会被设置成position: fixed
                    top: event.clientY-50 //开始位置（必填）
                },
                end: {
                    left: offset.left+30, //结束位置（必填）
                    top: offset.top, //结束位置（必填）
                    width: 0, //结束时宽度
                    height: 0 //结束时高度
                },
                onEnd: function () { //结束回调
                    $("#msg").show().animate({width: '180px'}, 200).fadeOut(1000); //提示信息
                }

            });
        });
    });
</script>

</body>
</html>












